<template>
	<view class="box">
		<text class="title">您的好友向您分享</text>
		<view class="voucher_list">
			<view class="voucher_list_item">
				<view class="voucher_list_item_top">
					<view class="voucher_list_item_top_left"
						:class="[shareDetail.type==3?'voucher_list_item_top_secondly':shareDetail.type==2?'voucher_list_item_top_thirdly':(shareDetail.type==4 || shareDetail.type == 6 || shareDetail.type == 7)&&'voucher_list_item_top_fourthly']">
						<view class="voucher_list_item_top_left_money">
							<text class="voucher_list_item_top_left_money_sign">￥</text>
							<text class="voucher_list_item_top_left_money_amount">{{Number(shareDetail.couponPrice)}}</text>
						</view>
						<text class="voucher_list_item_top_left_fullmoney">满{{shareDetail.minPrice}}元</text>
					</view>
					<view class="voucher_list_item_top_right">
						<view class="voucher_list_item_top_right_information">
							<view class="voucher_list_item_top_right_information_effect">
								<text class="voucher_list_item_top_right_information_effect_left">{{shareDetail.name}}</text>
								<text v-if="shareDetail.type==3||shareDetail.type==4 || shareDetail.type==7 || shareDetail.type ==6"
									class="voucher_list_item_top_right_information_effect_right"
									:class="[(shareDetail.type==4 || shareDetail.type == 6 || shareDetail.type == 7)&&'voucher_list_item_top_right_information_effect_vipright']">{{shareDetail.superimpose==1?'可叠加':'不可叠加'}}</text>
								<!-- <text v-if="shareDetail.type==4 || shareDetail.type==7 || shareDetail.type ==6"
									class="voucher_list_item_top_right_information_effect_right voucher_list_item_top_right_information_effect_vipright"
									:class="[(shareDetail.type==4 || shareDetail.type == 6 || shareDetail.type == 7)&&'voucher_list_item_top_right_information_effect_vipright']">{{shareDetail.combination_id?'可组合':'不可组合'}}</text> -->
							</view>
							<view class="voucher_list_item_top_right_information_sharenum">
								X{{shareDetail._num}}
							</view>
							<view class="voucher_list_item_top_right_information_cxtravalue">
								<text class="voucher_list_item_top_right_information_time">有效期至{{shareDetail.endTimeText}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="voucher_list_item_bottom">
					<view class="voucher_list_item_bottom_condition">
						<text class="voucher_list_item_bottom_condition_text"
							:class="[shareDetail.isImage&&'voucher_list_item_bottom_condition_extext']">
							{{shareDetail.useRule}}
						</text>
					</view>
					<view class="" @click="switchover(shareDetail)">
						<view class="voucher_list_item_bottom_imageview">
							<image class="voucher_list_item_bottom_image"
								:class="[shareDetail.isImage&&'voucher_list_item_bottom_eximage']"
								src="@/static/my/pulldown.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="share">
			<view class="share_status" :class="[status != 1 && 'share_status-gary']" @click="clCoupon">
				立即领取
			</view>
		</view>
		<view class="go_home" @click="goHome">
			<text>进入首页</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				shareDetail: {},
				status: 1,
				queryInfo: {},
				id: null,
				state:''
			}
		},
		onLoad(options) {
			const { shareDetail,id }  = options
			this.id = id;
			this.shareDetail = JSON.parse(shareDetail)
			// this.queryInfo = options
			console.log(this.shareDetail,'shareDetail23456')
			console.log(this.id,'shareDetail23456')
		},
		filters:{
			statusWord(value) {
				let valueNum = Number(value);
				switch(valueNum) {
					case 1:
						return "立即领取";
					case 3:
						return "该券已被分享者使用";
					case 2:
						return "该券已被他人领取";
				}
			},
			conversionTime:function(value){
				let time = Number(value)*1000;
				const dt = new Date(time)
				const y = dt.getFullYear()
				const m = (dt.getMonth() + 1 + '').padStart(2, '0')
				const d = (dt.getDate() + '').padStart(2, '0')
				const hh = (dt.getHours() + '').padStart(2, '0')
				const mm = (dt.getMinutes() + '').padStart(2, '0')
				return `${y}-${m}-${d} ${hh}:${mm}`
			}
		},
		methods: {
			getCoupon() {
				this.api.shareDetail({
					id: this.queryInfo.hd
				})
				.then(res=>{
					this.shareDetail = res;
					this.status = res.share_status;
				})
			},
			clCoupon() {
				console.log('点击领取了')
					let self = this;
					uni.showLoading({
						title: '加载中'
					})
					self.loading = true;
					self._post('user/coupon/receiveShareCoupon', {
						couponShareId:self.id,						
					}, function(res) {
						console.log(res,'领取返回')
						const { msg,code } = res;
						if(msg == '领取成功'){
							uni.showToast({
								title: '领取成功'
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'/userpage/userinfo/walletDetail/voucher'
								})
							},1500)
						}else if(code == -1){
							self.gotoPage('/pages/login/regitst')
						}else{
							uni.showToast({
								title: msg
							})
						}
						
					});
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			switchover(item) {
				this.shareDetail.isImage = !this.shareDetail.isImage
			},
		}
	}
</script>

<style lang="less">
	.box {
		padding-top: 40rpx;
	}
	.title {
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
		padding-left: 30rpx;
	}
	.voucher_list {
		// margin-top: 46rpx;
		padding: 0 30rpx;

		&_item {
			padding: 0 20rpx;
			margin-top: 30rpx;
			box-shadow: 0px 0px 12px 0px rgba(91, 74, 40, 0.1);
			border-radius: 8rpx;

			&_top {
				padding: 24rpx 0;
				display: flex;
				align-items: flex-start;

				&_left {
					width: 188rpx;
					height: 152rpx;
					background: linear-gradient(90deg, #0DA057 0%, #077840 100%);
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;

					&_money {
						display: flex;
						align-items: center;

						&_sign {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 34rpx;
							margin-top: 30rpx;
						}

						&_amount {
							font-size: 60rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 84rpx;
						}
					}

					&_fullmoney {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}

				&_secondly {
					background: linear-gradient(90deg, #FF9800 0%, #FF4E00 100%);
				}

				&_thirdly {
					background: linear-gradient(90deg, #5BB6FB 0%, #2F80F6 100%);
				}

				&_fourthly {
					background: linear-gradient(315deg, #F6E3B8 0%, #DAB279 100%);

					.voucher_list_item_top_left_money_sign {
						color: #735116;
					}

					.voucher_list_item_top_left_money_amount {
						color: #735116;
					}

					.voucher_list_item_top_left_fullmoney {
						color: #735116;
					}
				}

				&_extra {
					background: #C8C8C8;
				}

				&_right {
					display: flex;
					// justify-content: space-between;
					// align-items: center;
					flex: 1;
					min-height: 152rpx;

					&_information {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						&_effect {
							display: flex;
							align-items: flex-start;

							&_left {
								flex: 1;
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 40rpx;
								margin-right: 8rpx;
							}

							&_right {
								width: 98rpx;
								height: 32rpx;
								background: #FFFFFF;
								border-radius: 4rpx;
								border: 2rpx solid #FF5100;
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FF5100;
								line-height: 28rpx;
								text-align: center;
								box-sizing: border-box;
								margin-top: 4rpx;
							}

							&_vipright {
								margin-left: 16rpx;
							}

							&_used {
								border-color: #C8C8C8;
								color: #C8C8C8;
							}

							&_vipright {
								border-color: #735116;
								color: #735116;
							}

							&_stale {
								background-color: #C8C8C8;
							}
						}

						&_cxtravalue {
							display: flex;
							align-items: center;
							justify-content: space-between;
						}

						&_time {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}

						&_amount {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}

						&_used {
							color: #999999;
						}

						&_stale {
							color: #999999;
						}
						&_sharenum {
							text-align: right;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
						}
					}

					&_status {
						display: flex;
						align-items: center;

						&_text {
							width: 124rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 26rpx;
							border: 2rpx solid #077840;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #077840;
							line-height: 44rpx;
							text-align: center;
							box-sizing: border-box;
						}

						&_secondly {
							border: 2rpx solid #FF5100;
							color: #FF5100;
						}

						&_thirly {
							border: 2rpx solid #2F80F6;
							color: #2F80F6;
						}

						&_fourthly {
							border: 2rpx solid #242C3B;
							color: #242C3B;
						}
					}

					&_boximage {
						width: 136rpx;
						display: flex;
						align-items: center;

						image {
							width: 136rpx;
							height: 114rpx;
							vertical-align: top;
						}
					}
				}
			}

			&_bottom {
				padding: 24rpx 0;
				border-top: 2rpx dashed #E5E5E5;
				display: flex;
				justify-content: space-between;

				&_condition {
					display: flex;
					flex-direction: column;
					width: calc(100% - 50rpx);

					&_text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						margin-bottom: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					&_extext {
						overflow: inherit;
						text-overflow: inherit;
						white-space: inherit;
					}
				}

				&_imageview {
					height: 34rpx;
					width: 44rpx;
					margin-right: -10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&_image {
					width: 24rpx;
					height: 14rpx;
					vertical-align: top;
					// margin-top: 10rpx;
					// margin-left: 24rpx;
					transform: rotate(0);
					// transition: 0.3s ease-in-out;
				}

				&_eximage {
					transform: rotate(-180deg);
				}
			}
		}
	}
	.share {
		// display: flex;
		text-align: center;
	}
	.share_status {
		// width: 240rpx;
		height: 84rpx;
		background: #077840;
		border-radius: 84rpx 84rpx 84rpx 84rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 84rpx;
		box-sizing: border-box;
		text-align: center;
		padding: 0 56rpx;
		margin: 60rpx auto;
		display: inline-block;
		// cursor: pointer;
	}
	.share_status-gary {
		background: #999999;
	}
	.go_home {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #077840;
		line-height: 44rpx;
		text-align: center;
		text {
			// cursor: pointer;
		}
	}
</style>
